<template>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <span style="margin:0 0 30px 80px;color:#5d65d5;font-size: 20px;font-weight: 700;">
    用户注册
  </span>
  <el-form-item label="昵称" prop="accName">
    <el-input v-model="ruleForm.accName"></el-input>
  </el-form-item>
 <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" show-password prefix-icon="el-icon-lock" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" show-password prefix-icon="el-icon-lock" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="性别" prop="sex">
  <el-radio-group v-model="ruleForm.sex" >
    <el-radio label="1">男</el-radio>
    <el-radio label="2">女</el-radio>
  </el-radio-group>
  </el-form-item>
<el-form-item label="真实姓名" prop="realName">
    <el-input v-model="ruleForm.realName"></el-input>
  </el-form-item>
  <el-form-item label="电话号码" prop="phone">
    <el-input v-model="ruleForm.phone"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
    <span style="position:absolute;left:30px;top:40px">已有账号？</span>
    <div class="login">
    <router-link to="/login">
      去登录
    </router-link>
    </div>
  </el-form-item>
</el-form>
</template>

<style>
.demo-ruleForm{
    position: absolute;
    top: 40%;
    left: 55%;
    width: 307px;
    background: #FFFFFF;
    margin: -220px 0 0 -250px;
}
.login {
  margin: 0 0 0 80px;
}
.login a{
  padding: 2px;
  font-size: 16px;
  text-decoration: none;
  color: #5d65d5;
}
</style>
<script>
// import http from '../../../util/http'
export default {
  name: 'uregister',
  data () {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('昵称不能为空'))
      } else {
        callback()
      }
    }
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('真实姓名不能为空'))
      } else {
        callback()
      }
    }
    var checkTel = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
      // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
      // 所以在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    var validatePass = (rule, value, callback) => {
      const passReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
      if (!value) {
        return callback(new Error('密码不能为空'))
      }
      setTimeout(() => {
        if (passReg.test(value)) {
          callback()
        } else {
          callback(new Error('密码至少包含 数字和英文，长度6-20'))
        }
      }, 100)
    }
    var validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('密码不能为空'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        realName: '',
        accName: '',
        sex: '1',
        phone: '',
        pass: '',
        checkPass: ''
      },
      rules: {
        realName: [
          { validator: checkUser, trigger: 'blur' }
        ],
        accName: [
          { validator: checkName, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        tel: [
          { validator: checkTel, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.axios.post('http://172.24.19.22:8088/Cregister', this.ruleForm, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })
          //   .then(res => {
          //     console.log(res)
          //   })

          // http.post('/Cregister', this.ruleForm).then(res => {
          //   console.log(res)
          // })
          console.log(this.ruleForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
